In the last part of the course, we created our backgrounds for our main menu here and now it's time
to actually add all of our buttons, our play button settings, button and quick, and that's what we're
going to be going over today.
So let's hop into our main menu folder here and we're going to right.
Click and create a new widget blueprint of sorts and create this.
I'm just going to call this menu.
Buttons, open this up here, and we are going to start using a few things that we have not used yet.
So first thing that we need is a vertical box.
And this is a it's a widget actor that allows us to organize other things more easily.
So the way we're going to be using this is we're going to be putting our three buttons in here and it's
going to align them all vertically, perfectly in this space.
So let's let's create a button.
We're going to grab this button here and I'm going to drag it into the vertical box here in the hierarchy
so it automatically becomes a child.
And then what are we going to do is I'm going to create a text block and I'm going to actually make
the text block a child of the button so it'll actually be centered in the button.
So it's going to drag that on there.
And now you can see we have this text block button.
It's very basic at the moment.
But what we're about to do is going to spice it up a bit and make it look much nicer.
So let's do this this kind of spicing up business first.
So let's first just grab our text block here.
And I'm just going to say play as the the text for it.
I'm going to change the font to rubato, tiny, and that's all I'm going to do for the text.
I think that'll be just fine right there.
So next I'll grab the button itself and I'm going to go to the style.
So in here we've got a bunch of settings that we can use to adjust, you know, things like the color,
the opacity, the color.
When the button is hovered, the color when the button is pressed.
And we want all of these things to actually just be completely transparent.
So I'm going to go to the tint section of all of these different style dropdown.
So we got normal hovered and pressed in in the tint.
I'm going to set the opacity all the way to zero.
That way we just have this nice text.
It's very clean, it's very elegant.
And this is the kind of the format that I really like to follow when I'm working on, you know, any
of my games.
I don't really usually don't like having a background button.
So another thing that's new and unreal, Engine five, if you're more familiar with Unreal four, is
they've made it so that by default buttons have this kind of a round edge to them.
You might it might be a little difficult to see here, but you can kind of tell you got this this gray
edge around the button.
And I don't want that either.
So right here in the drawer as dropdown, it's by default rounded box, which is where it creates the
the outline.
And instead, I'm just going to switch this to image and that will get rid of that that outline, as
you can see here.
So now I just need to do these same settings for the covered and pressed.
So I'm just going to bring the covered tint down and switch from different as rounded box to draw image.
And then lastly for the.
For the pressed settings down and image.
So now we have a gorgeous, beautiful, amazing button in a vertical box and the last thing that we
need to do here is, well, almost the last thing we need to do here is we need to duplicate a couple
of times.
So we're just going to copy this.
And just like the vertical box and I'm going to paste two buttons into this vertical box so that we
can see we have three child buttons.
They also play.
They're all identical and they are all very close together.
So what I'm going to do is I'm first just going to switch to the text on all of these.
So which one to say settings and one to say quit.
And I would like for these buttons to be spaced out a little bit.
Right.
Because they're all right on top of each other here.
So what I'll do is I'll grab all of these buttons here.
I'll just select one here, hit shift, hold shift and then left me again.
So I got all these selected.
I'm going to go to the padding setting up here in the details panel.
If I hit this dropdown and I go to the top padding, I can add a padding of, say, 10.
And now the top of all of these buttons has a padding of ten units between, you know, that button
and the one on top of it.
And then I can add a little bit of bottom padding.
Ten just so it's nice and even and that looks pretty good.
Obviously, you can adjust this however you like, depending on what you think a look best.
I think seven is pretty good in this case, and I'd say I'm quite happy with how that's all laid out.
So now all that we need to do is just align this so that it will be basically just underneath the the
logo in our main menu background here.
So it'll just appear kind of right down here.
And to do that, what we're going to do is we're going to add this widget to our screen through our
level blueprint.
So let's not back it in here to our level blueprint.
I'm going to just duplicate this, create a menu background widget code here.
Just place it to the side and I'm going to switch the widget that we're creating from the menu background
to our menu buttons.
That way they'll be created right on top.
And now when we play, we can see we have.
Are our buttons in here and they are not in line, so we're going to need to adjust that a little bit
so we can just hop in here, adjust the placement of these at play.
That's a little far that way.
And now we're getting a little closer here.
Something like this is going to be perfect, so we now have all of the visuals for our main menu screen
in the next part, you know, we're going to be getting into like the animations for all of this stuff
and making it all even more fancy.
You're going to start getting into more of the programming of things, but that is it.
For this part.
We've created our buttons widget and yeah, I'm excited to get into the rest of it, hopefully, or
two.
And I will see you in the next part.